import React from "react";
import styles from '@/assets/css/order_info.module.css';

const OrderRate = () => {
    let [rate, SetRate] = React.useState('')
    let [content, SetContent] = React.useState('')

    const RateConfirm = () =>
    {
        console.log('------')
    }

    return (
        <>
            <div className={styles.order_info}>
                <div className={styles.info_content}>
                    <div className={styles.content_title}>订单信息：</div>
                    <div className={styles.content_item}>
                        <p>入住时间</p>
                        <div>2024-03-21 星期四 - 2024-03-22 星期五</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>入住天数</p>
                        <div>共 10 晚</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>订单价格</p>
                        <div className={styles.content_price}>￥180.00</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>房间单价</p>
                        <div className={styles.content_price}>￥80.00</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>支付方式</p>
                        <div>支付宝</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>入住人数</p>
                        <div>4 人</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>订单备注</p>
                        <div>要求干净，不要有噪声</div>
                    </div>
                </div>
                {/* 房间信息 */}
                <div className={styles.info_footer}>
                    <div className={styles.content_title}>房屋信息：</div>
                    <div className={styles.detail}>
                        <div className={styles.thumb}>
                            <img src={require("@/assets/images/hotel1.jpg")} alt="" />
                        </div>
                        <div className={styles.right}>
                            <p>普通标间</p>
                            <div className={styles.tips}>
                                <React.UI.Tag color='primary'>一室一厅</React.UI.Tag>
                                <React.UI.Tag color='primary'>15.00㎡</React.UI.Tag>
                                <React.UI.Tag color='primary'>宜住2人</React.UI.Tag>
                            </div>
                        </div>
                    </div>
                </div>

                {/* 评价信息 */}
                <div className={styles.info_footer}>
                    <div className={styles.content_title}>评价信息：</div>
                    <div className={styles.comment}>
                        <React.UI.Rate value={rate} onChange={(val: number) => SetRate(val.toString())} />

                        <React.UI.Divider
                            style={{
                                color: '#1677ff',
                                borderColor: '#1677ff',
                                borderStyle: 'dashed',
                            }}
                        ></React.UI.Divider>

                        <React.UI.TextArea className={styles.textarea} placeholder="请输入评论内容" value={content} onChange={(val: string) => { SetContent(val) }} autoSize={{ minRows: 3, maxRows: 5 }} />

                        <React.UI.Button onClick={RateConfirm} color='primary'>提交评价</React.UI.Button>
                    </div>
                </div>
            </div>
        </>
    )
}

export default OrderRate;
